<template>
  <div id="app">
    <div class="warp">
      <div class="Aside">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#0F2C56"
              text-color="#fff"
              active-text-color="#00A0E8"
            >
              <el-menu-item
                router="true"
                @click="router(index)"
                v-for="(item, index) in Router"
                :key="index"
                :index="index.toString()"
              >
                <i :class="item.mate.icon"></i>
                <span slot="title">{{ item.name }} </span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="Header">
        <div class="Header-left">123</div>
        <div class="Header-ringht">
          <div class="Header-img">
            <a-avatar
              src=" https://img0.baidu.com/it/u=3580606626,2243164435&fm=26&fmt=auto&gp=0.jpg"
            />
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              管理员<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu  slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>切换账号</el-dropdown-item>
              <el-dropdown-item  @click.native="tuic">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="Main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import Router from "@router";
import {isLoading} from '@utils/index'
export default {
  data() {
    return {
      Router: Router.options.routes[2].children.filter(route=>route.mate.isNav)
    };
  },
  created() {
    
  },
 
  methods: {
    tuic(){
      this.$router.push('/app/loading')
      localStorage.removeItem("token")
      localStorage.removeItem("userinfo")
    },
  
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    router(index) {
      this.$router.push(this.Router[index]);
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  height: 100vh;
}
.Aside {
  width: 150px;
  min-height: 400px;
  background-color: #0f2c56;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
}
.warp-left {
  flex: 1;
}
.Header {
  height: 75px;
  background: linear-gradient(to right, #071f45, #155e87, #071f45);
  position: fixed;
  top: 0;
  left: 150px;
  right: 0;
}
.el-col {
  width: 150px;
}
.el-menu {
  border: 0;
}
.Main {
  position: fixed;
  overflow: auto;
  right: 0;
  bottom: 0;
  top: 75px;
  left: 150px;
}
.Header {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.Header-ringht {
  padding: 10px 0 0 0;
}
</style>